<template>
  <div class="c-p c-bg-sgray c-pb100">
    <section class="c-ph24 c-pv24">
      <div v-for="(item, index) in refundLog" :key="index" class="c-pv24 c-ph24 c-bg-white c-mb24 c-br8">
        <div class="c-flex-row c-aligni-center c-justify-sb c-fc-xblack c-fs24 c-pb24 c-bd-b1">
          <span class="c-flex-row c-aligni-center"><i class="iconfont c-fs48  c-mr12" :class="item.operator == 2 ? 'c-fc-409eff icon-xingzhuangjiehe': 'theme-fc icon-xingzhuangjiehe1'"></i>{{item.operator == 1 ? '买家' : '商家'}}</span>
          <span class="c-fc-gray">{{item.createdAt}}</span>
        </div>
        <p class="c-fs24 c-fc-xblack c-lh34 c-mt24">{{item.title}}</p>
        <template v-if="item.refundStatus == 1">
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.content && item.content.takeStatus">货运状态：<span class="c-fc-xblack">{{expressStateMap[item.content.takeStatus - 1].name}}</span></p>
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.content && item.content.refundReason">退款原因：<span class="c-fc-xblack">{{refundReasonMap[item.content.refundReason]}}</span></p>
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.content && item.content.refundMoney">退款金额：<span class="c-fc-xblack">{{'￥' | iosPriceFilter}}{{item.content.refundMoney}}</span></p>
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24 c-flex-row c-aligni-start" v-if="item.content && item.content.explanation"><span>退款说明：</span><span class="c-fc-xblack c-w0 c-flex-grow1">{{item.content.explanation}}</span></p>
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div v-for="(img, imgIndex) in item.proofPics" :key="imgIndex" class="c-ww80 c-hh80 c-br4 c-text-hidden c-mt24" :class="imgIndex == 5 ? '' : 'c-mr12'">
              <img @click="clickPreviewImage(imgIndex, img, item.proofPics)" class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(img)" alt=""/>
            </div>
          </div>
        </template>
        <template v-if="item.refundStatus == 5">
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.content && item.content.shipNo">快递单号：<span class="c-fc-xblack">{{item.content.shipNo}}</span></p>
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.content && item.content.shipName">快递公司：<span class="c-fc-xblack">{{item.content.shipName}}</span></p>
        </template>
        <template v-if="[-2, 2].includes(item.refundStatus)">
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24 c-flex-row c-aligni-start" v-if="item.refundStatus == -2 && item.content && item.content.rejectReason"><span>拒绝原因：</span><span class="c-fc-xblack c-w0 c-flex-grow1">{{item.content.rejectReason}}</span></p>
          <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.refundStatus == 2 && item.content && item.content.refundMoney">退款金额：<span class="c-fc-xblack">{{'￥' | iosPriceFilter}}{{item.content.refundMoney}}</span></p>
        </template>
        <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.refundStatus == -6 && item.content && item.content.rejectReason">{{item.content.rejectReason}}</p>
        <p class="c-fs20 c-fc-sblack c-lh28 c-mt24" v-if="item.refundStatus == 4 && item.content && item.content.refundMoney">退款金额：<span class="c-fc-xblack">{{'￥' | iosPriceFilter}}{{item.content.refundMoney}}</span></p>
      </div>
    </section>
    <custom-service-tmp :position="2" class="order-fotter c-bg-white"></custom-service-tmp>

  </div>
</template>

<script>
import CustomServiceTmp from '@/components/templates/custService/customServiceTmp.vue';
import { utilJs, wxUtilJs } from "@/utils/common.js";
let gorId = '';
export default {
  name: "orderRefundLog",
  components: {
    CustomServiceTmp
  },
  props: [],
  computed: {
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      refundLog: [], // 退货记录
      refundReasonMap: {
        '1': '订单信息拍错',
        '2': '多拍/拍错/不想要',
        '3': '地址/电话填写有误',
        '4': '没用/少用优惠',
        '5': '发货/物流问题',
        '6': '缺货',
        '7': '拍多了',
        '8': '协商一致退款',
        '9': '其他',
        '11': '商品损坏/与描述不一致',
        '12': '质量问题',
        '13': '未付尾款，申请退定金'
      },
      expressStateMap: [ // 货运物流原因
        {type: 1, name: '未收到货'},
        {type: 2, name: '已收到货'}
      ],
      isCustServiceOpen: localStorage.getItem("isCustServiceOpen") == 1 ? true : false, // 是否开启小程序客服
    };
  },
  created() {
    utilJs.appShare(this);
  },

  methods: {
    // 图片预览
    clickPreviewImage(index, imgUrl, imgs) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgs) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    // 获取售后信息
    getRefundLog() {
      utilJs.getMethod(
        global.apiurl + "mall/getRefundLog?gorId=" + gorId, (res) => {
          this.refundLog = res;
        }
      )
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    setDocumentTitle("协商记录");// eslint-disable-line
    gorId = this.$route.query.gorId || '';
    this.refundLog = [];
    this.getRefundLog();
  },
  deactivated() {
  }
};
</script>


<style scoped>
.order-fotter {
  width: 100%;
  max-width: 16rem;
  border: 1px solid rgba(242, 242, 242, 1);
  box-shadow: 0px -6px 3px 0px rgba(132, 132, 132, 0.03);
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
}
.c-fc-409eff {
  color: #409eff;
}
</style>
